<template>
  <div class="edit">
    <van-nav-bar
      title="编辑资料"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="imgF">
      <van-image
        width="120"
        height="120"
        fit="cover"
        round
        :src="userInfo.photo"
      />
      <!-- 修改头像 -->
      <van-uploader :after-read="afterRead" />
    </div>
    <van-cell title="名称" is-link :value="userInfo.name" @click="nameClick" />
    <van-cell
      title="性别"
      is-link
      :value="userInfo.gender ? '女' : '男'"
      @click="genderClick"
    />
    <van-cell
      title="生日"
      is-link
      :value="userInfo.birthday"
      @click="
        (showBirthday = true), (currentDate = new Date(userInfo.birthday))
      "
    />

    <!-- 1、姓名弹框 -->
    <van-dialog
      v-model="showName"
      title="修改名称"
      show-cancel-button
      @confirm="updateName"
    >
      <van-field v-model="newName" placeholder="昵称" ref="name" />
    </van-dialog>

    <!-- 2、性别弹框 -->
    <van-popup v-model="showGender" position="bottom">
      <van-nav-bar
        title="修改性别"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <van-cell title="男" is-link @click="updateGender(0)" />
      <van-cell title="女" is-link @click="updateGender(1)" />
    </van-popup>

    <!-- 3、生日弹框 -->
    <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="showBirthday = false"
        @confirm="updateBirthday(currentDate)"
      />
    </van-popup>

    <!-- 图片裁剪 -->
    <div class="cropper-box" v-show="picShow">
      <vueCropper
        ref="cropper"
        :img="img"
        autoCrop
        autoCropWidth="120px"
        autoCropHeight="120px"
      >
      </vueCropper>
      <van-button class="btnCommit" type="primary" @click="btnClick"
        >确认</van-button
      >
      <van-button class="btnRes" type="info" @click="picShow = false"
        >取消</van-button
      >
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { updateUserInfo, updatePhoto } from "./user.js";
import moment from "moment";
import { VueCropper } from "vue-cropper";

export default {
  name: "edit",
  data() {
    return {
      showName: false,
      showGender: false,
      newName: "",
      showBirthday: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      img: "",
      picShow: false, //图片是否显示
    };
  },
  methods: {
    //1、点击编辑姓名弹出修改框
    nameClick() {
      this.showName = true;
      this.newName = this.userInfo.name;
      //定时器
      this.$nextTick(function () {
        // DOM 更新了
        this.$refs.name.focus();
      });
    },
    //2、修改姓名
    updateName() {
      updateUserInfo({ name: this.newName }).then((res) => {
        // console.log(res);
        //1、修改成功之后，弹出提示框
        this.$toast.success("修改成功");
        //2、更新vuex数据
        this.$store.commit("updateData", {
          ...this.userInfo, //先传入原始数据
          name: res.data.data.name, //最近的数据修改原始数据
        });
        // this.userInfo.name = res.data.data.name;
      });
    },
    //3、点击返回，修改性别弹出框隐藏
    onClickLeft() {
      this.showGender = false;
    },
    //4、点击性别，修改性别弹出框显示
    genderClick() {
      this.showGender = true;
    },
    //5、修改性别
    updateGender(gender) {
      updateUserInfo({ gender }).then((res) => {
        // console.log(res);
        this.showGender = false;
        //1、修改成功之后，弹出提示框
        this.$toast.success("修改成功");
        this.$store.commit("updateData", {
          ...this.userInfo,
          gender: res.data.data.gender,
        });
      });
    },
    //6、修改生日
    updateBirthday(currentDate) {
      //   console.log(this.currentDate);
      //   console.log(moment(this.currentDate).format("YYYY-MM-DD"));
      let birthday = moment(currentDate).format("YYYY-MM-DD");
      updateUserInfo({ birthday }).then((res) => {
        // console.log(res);
        this.$store.commit("updateData", {
          ...this.userInfo,
          birthday: res.data.data.birthday,
        });
        this.showBirthday = false;
      });
    },
    afterRead(file) {
      this.picShow = true;
      //(1)设置需要裁切的图片交给cropper裁切 ： 这里需要使用base64编码的图片
      this.img = file.content;
      // 此时可以自行将文件上传至服务器
      //   let fd = new FormData();
      //   fd.append("photo", file.file);
      //   //   fd.append("photo", file.content);
      //   //   updateUserInfo(fd).then((res) => {
      //   //     console.log(res);
      //   //   });
      //   updatePhoto(fd).then((res) => {
      //     // console.log(res);
      //     this.$store.commit("updateData", {
      //       ...this.userInfo,
      //       photo: res.data.data.photo,
      //     });
      //   });
    },
    //6.裁切确认按钮： 裁切之后 上传图片
    btnClick() {
      //   fd.append("photo", file.content);
      //   updateUserInfo(fd).then((res) => {
      //     console.log(res);
      //   });
      // 获取Blob这种格式
      // formData + 接口提交到远程
      this.$refs.cropper.getCropBlob((blob) => {
        let fd = new FormData();
        fd.append("photo", blob);
        updatePhoto(fd).then((res) => {
          //(1)弹窗提示
          this.$toast.success("更新成功!");
          // console.log(res);
          this.$store.commit("updateData", {
            ...this.userInfo,
            photo: res.data.data.photo,
          });
        });
      });

      this.picShow = false;
    },
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  components: {
    VueCropper,
  },
};
</script>

<style lang="less">
.edit {
  .imgF {
    width: 100%;
    position: relative;
    .van-image {
      left: 50%;
      transform: translateX(-50%);
      margin: 20px auto;
    }
    .van-uploader {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 120px;
      border-radius: 50%;
      overflow: hidden;

      .van-uploader__upload {
        padding: 0;
        margin: 0;
        width: 120px;
        height: 120px;
        background: rgba(0, 0, 0, 0.2);
      }
    }
  }
  .cropper-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    .btnCommit {
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .btnRes {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
</style>